<!-- 路由 -->
// 导入组件
import Vue from 'vue';
import Router from 'vue-router';
// 登录
import login from '@/views/login';
// 首页
import index from '@/views/index';
/**
 * l路由
 */
//  首页概览
import statistics from '@/views/charts/statistics';
// 课程管理
import surgical from '@/views/surgical/surgical';
//学习进度
import learning from '@/views/charts/learning';
// 学习记录列表
import learn from '@/views/learn/index';
//题库管理
import videoReplay from '@/views/videoReplay/videoReplay';
/**
 * 用户管理
 */
// 用户管理
import user from '@/views/system/user';
// 角色管理
import Role from '@/views/system/Role';
//评论管理
import comment from '@/views/channel/comment';
//通知管理
import notice from '@/views/channel/notice';
// 启用路由
Vue.use(Router);
// 导出路由 
export default new Router({
    routes: [{
        path: '/',
        name: '',
        component: login,
        hidden: true,
        meta: {
            requireAuth: false
        }
    }, {
        path: '/login',
        name: '登录',
        component: login,
        hidden: true,
        meta: {
            requireAuth: false
        }
    }, {
        path: '/index',
        name: '首页',
        component: index,
        iconCls: 'el-icon-tickets',
        children: [
            {
            path: '/surgical/surgical',
            name: '课程管理',
            component: surgical,
            meta: {
                requireAuth: true
            }
        }, 
        {
            path: '/learn/learn',
            name: '学习记录',
            component: learn,
            meta: {
                requireAuth: true
            }
        }, 
        {
            path: '/channel/comment',
            name: '评论管理',
            component: comment,
            meta: {
                requireAuth: true
            }
        }, 
        {
            path: '/channel/notice',
            name: '通知公告管理',
            component: notice,
            meta: {
                requireAuth: true
            }
        },
        {
            path: '/videoReplay/videoReplay',
            name: '题库管理',
            component: videoReplay,
            meta: {
                requireAuth: true
            }
        }, 
         {
            path: '/system/user',
            name: '用户管理',
            component: user,
            meta: {
                requireAuth: true
            }
        },  {
            path: '/system/Role',
            name: '角色管理',
            component: Role,
            meta: {
                requireAuth: true
            }
        },  {
            path: '/charts/statistics',
            name: '概览',
            component: statistics,
            meta: {
                requireAuth: true
            }
        }, {
            path: '/charts/learning',
            name: '学习进度',
            component: learning,
            meta: {
                requireAuth: true
            }
        }
    ]
    }]
})
<!-- 登录 -->
<template>
  <div class="login-container">
    <h2 class="login-title">在线学习系统</h2>
    <el-form
      :model="loginForm"
      :rules="loginRules"
      ref="loginForm"
      label-width="120px"
      class="login-form"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
          v-model="loginForm.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="loginForm.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">登录</el-button>
        <el-button type="text" @click="resetForm">重置</el-button>
        <el-link type="text" @click="showPasswordReset">忘记密码？</el-link>
      </el-form-item>
      <div v-if="loginError" class="login-error">{{ loginError }}</div>
    </el-form>
    <el-dialog :visible.sync="passwordResetVisible" title="重置密码">
      <el-form
        :model="passwordResetForm"
        :rules="passwordResetRules"
        ref="passwordResetForm"
        label-width="120px"
      >
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            type="password"
            v-model="passwordResetForm.newPassword"
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            type="password"
            v-model="passwordResetForm.confirmPassword"
            placeholder="请再次输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlePasswordResetSubmit"
            >提交</el-button
          >
          <el-button @click="passwordResetVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>  
<script>
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [  
          { 
            required: true, 
            message: '请输入用户名', 
            trigger: 'blur' 
          },  
          { 
            min: 3, 
            max: 5, 
            message: '长度在 3 到 5 个字符', 
            trigger: 'blur'
          }  
        ],  
        password: [  
          { 
            required: true,
            message: '请输入密码',
            trigger: 'blur' 
           },  
          { 
            min: 5, 
            max: 18, 
            message: '长度在 5 到 18 个字符', 
            trigger: 'blur'
         }  
        ]   
      },
      loginError: "",
      passwordResetVisible: false,
      passwordResetForm: {
        newPassword: "",
        confirmPassword: "",
      },
      passwordResetRules: {
        newPassword: [
          { 
            required: true,
             message: "请输入新密码",
              trigger: "blur" 
          },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          { required: true, 
            message: "请再次输入新密码",
             trigger: "blur"
          },
          { 
            validator: this.validateConfirmPassword, 
            trigger: "blur" 
          },
        ],
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.login();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    login() {
      this.simulateLogin();
    },
    async simulateLogin() {
      // 假设这是你的登录API请求
      const response = await this.login();
      try {
        if (response.data.success) {
          // 登录成功
          this.$router.push("/Home"); // 假设登录成功后跳转到首页页面
        } else {
          // 登录失败，更新错误信息
          this.loginError = response.data.message || "登录失败，请重试。";
        }
      } catch (error) {
        // 处理请求错误，比如网络错误
        if (error.response) {
          // 请求已发出，但服务器响应的状态码不在 2xx 范围内
          this.loginError =
            error.response.data.message || "网络错误，请检查你的网络连接。";
        } else if (error.request) {
          // 请求已发出，但没有收到任何响应
          this.loginError = "请求已发送，但未收到响应。";
        } else {
          // 在设置请求时触发了某些错误
          this.loginError = "请求设置错误，请稍后再试。";
        }
      }
    },
    resetForm() {
      this.$refs.loginForm.resetFields();
    },
    showPasswordReset() {
      this.passwordResetVisible = true;
    },
    handlePasswordResetSubmit() {
      this.$refs.passwordResetForm.validate((valid) => {
        if (valid) {
          this.resetPassword();
        } else {
          console.log("密码重置表单验证失败！");
          return false;
        }
      });
    },
    resetPassword() {
      this.simulatePasswordReset();
    },
    simulatePasswordReset() {
      const userEmail = prompt("请输入您的电子邮件地址以重置密码：");
      function simulateApiRequest(email) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            if (email === "") {
              // 用户未输入电子邮件地址
              reject("请输入有效的电子邮件地址");
            } else if (email === "invalid@example.com") {
              // 电子邮件地址无效或用户不存在
              reject("无效的电子邮件地址或用户不存在");
            } else if (email === "alreadyreset@example.com") {
              // 用户最近已经重置过密码
              reject("您最近已经重置过密码，请尝试登录");
            } else {
              // 假设其他情况都是成功的
              resolve("密码重置链接已发送到您的邮箱");
            }
          }, 1000);
        });
      }
      simulateApiRequest(userEmail)
        .then((message) => {
          console.log("密码重置成功：", message);
          this.$message.suceess("密码重置失败,请重试");
        })
        .catch((error) => {
          console.log("密码重置失败：", error);
          this.$message.info("密码重置失败,请重试");
        });
    },
  },
};
</script> 
<!-- 首页 -->
<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
    <el-row :gutter="23">
      <el-col :span="18">
        <div class="stbgc">
          <el-row :gutter="23">
            <el-col :span="7">
              <el-date-picker v-model="searchDateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-col>
            <el-col :span="7" class="stsearch">
              <el-button size="small" type="primary" @click="searchCourseClicksByDateRange">搜索</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 统计图 -->
    <el-row :gutter="23">
      <el-col :span="8" class="text-c">
        <div class="st-gbox" style="width:1300px;height: 600px;">
          <div class="cavasbox" ref="SCEchart"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
export default {
  name: "welcome",
  data() {
    return {
      machineNo: '',
      type: 'day',
      searchDateRange:any,
      //  课程点击量
      classOption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}日 : {c}"
        },
        title: {
          text: '课程点击量',
          // top: -20 // 增加标题与图表的间距
        },
        //显示图列
        legend: {
          data: [{
            name: 'java',
            icon: 'rect'
          },
          {
            name: 'vue',
            icon: 'rect'
          }, {
            name: 'react',
            icon: 'rect'
          }, {
            name: 'php',
            icon: 'rect'
          }
          ],
          type: 'plain',
          orient: 'horizontal',
          show: true //图例是否显示
        },
        grid: {
          left: 50,
          right: 10,
          // top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['4.1', '4.2', '4.3', '4.4', '4.5', '4.6', '4.7'],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: 'java',
          type: 'line',
          barGap: 0,
          data: [1, 3, 2, 8, 4, 5, 4],
          barWidth: 10,
          type: "line",
          symbol: "square",
          symbolSize: 8,
          smooth: true,
          itemStyle: {
            normal: {
              color: "#FF7E2C",
              lineStyle: {
                color: "#FF7E2C",
              }
            }
          }
        }, {
          name: 'vue',
          data: [2, 4, 5, 6, 3, 2, 4],
          type: "line",
          symbol: "square",
          symbolSize: 8,
          smooth: true,
          itemStyle: {
            normal: {
              color: "#FF00FF",
              lineStyle: {
                color: "#FF00FF",
              }
            }
          }
        }, {
          name: 'react',
          data: [4, 4, 2, 3, 5, 7, 3],
          type: "line",
          symbol: "square",
          symbolSize: 8,
          smooth: true,
          itemStyle: {
            normal: {
              color: "#008080",
              lineStyle: {
                color: "#008080",
              }
            }
          }
        }, {
          name: 'php',
          data: [3, 2, 4, 5, 4, 6, 2],
          type: "line",
          symbol: "square",
          symbolSize: 8,
          smooth: true,
          itemStyle: {
            normal: {
              color: "#EAADEA ",
              lineStyle: {
                color: "#EAADEA ",
              }
            }
          }
        }
        ]
      },
    }
  },
  // 导入组件
  components: {
    // 点聚合组件
  },
  created() { },
  mounted() {
    this.getClass()
  },
  // 里面的函数只有调用才会执行
  methods: {
    //课程点击量
    getClass() {
      this.chart = Chart.init(this.$refs.SCEchart) //深色模式  ,'dark'
      this.chart.setOption(this.classOption) //设置数据
    },
    //根据日期搜索课程点击量
    searchCourseClicksByDateRange(startDateString, endDateString) {
      this.error = null; // 重置错误状态  
      if (!this.searchDateRange) {  
        this.error = '请选择日期范围';  
        return;  
      }  
      const [startDate, endDate] = this.searchDateRange;  
      // 验证日期格式是否正确  
      if (!startDate || !endDate) {  
        this.error = '日期格式不正确';  
        return;  
      }  
      // 发送请求获取课程点击量  
      this.fetchCourseClicks(startDate, endDate)  
        .then(results => {  
          this.searchResults = results;  
        })  
        .catch(error => {  
          this.error = error;  
        });  
    },
    fetchCourseClicks(startDate, endDate) {  
      //获取数据  
      return new Promise((resolve, reject) => {  
        // 模拟请求延迟  
        setTimeout(() => {  
          const filteredClicks = this.courseClicks.filter(item => {  
            const itemDate = new Date(item.date);  
            const startDateObj = new Date(startDate);  
            const endDateObj = new Date(endDate);  
            return itemDate >= startDateObj && itemDate <= endDateObj;  
          });  
          if (filteredClicks.length > 0) {  
            resolve(filteredClicks);  
          } else {  
            reject('没有找到该日期范围内的课程点击量');  
          }  
        }, 1000); // 1秒延迟  
      });  
    },  
  }
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  padding: 0px 16px;
}
.stsearch {
  text-align: center;
}
.text-c {
  text-align: center;
}
.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}
.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}
</style>
<!-- 左边导航菜单 -->
<template>
  <!-- unique-opened 只保留一个子菜单打开 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转   default-active 当前激活菜单的 index -->
  <el-menu default-active="2" :collapse="collapsed" collapse-transition  router :default-active="$route.path" 
  unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b">
    <div class="logobox">
      <!--标题 -->
      在线学习系统
    </div>
    <el-submenu v-for="menu in allmenu" :key="menu.menuid" :index="menu.menuname">
      <template slot="title">
        <span>{{menu.menuname}}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item v-for="chmenu in menu.menus" :index="'/'+chmenu.url" :key="chmenu.menuid">
          <span>{{chmenu.menuname}}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>
<script>
import { menu } from '../api/userMG'
export default {
  name: 'leftnav',
  data() {
    return {
      collapsed: false,
      allmenu: []
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    // 获取图形验证码
    let res = {
      success: true,
      // 右侧标题
      data: [
      {
          menuid: 150,
          icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
          menuname: '首页',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 159,
              icon: 'icon-provider-manage',
              menuname: '概览',
              hasThird: 'N',
              url: 'charts/statistics',
              menus: null
            }
          ]
        },
        {
          menuid: 1,
          icon: 'li-icon-xiangmuguanli',
          menuname: '课程管理',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 2,
              icon: 'icon-cat-skuQuery',
              menuname: '课程管理',
              hasThird: 'N',
              url: 'surgical/surgical',
              menus: null
            }
          ]
        },
        {
          menuid: 33,
          icon: 'li-icon-dingdanguanli',
          menuname: '学习进度管理',
          hasThird: null,
          url: null,
          menus: [
          {
              menuid: 159,
              icon: 'icon-provider-manage',
              menuname: '学习进度概览',
              hasThird: 'N',
              url: 'charts/learning',
              menus: null
            },
            {
              menuid: 160,
              icon: 'icon-order-manage',
              menuname: '学习进度记录',
              hasThird: 'N',
              url: 'learn/learn',
              menus: null
            }
          ]
        },
        {
          menuid: 78,
          icon: 'li-icon-dingdanguanli',
          menuname: '题库管理',
          hasThird: null,
          url: null,
          menus: [
          {
              menuid: 1900,
              icon: 'icon-provider-manage',
              menuname: '题库管理',
              hasThird: 'N',
              url: 'videoReplay/videoReplay',
              menus: null
            }
          ]
        },
        {
          menuid: 71,
          icon: 'li-icon-xitongguanli',
          menuname: '用户管理',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 72,
              icon: 'icon-cus-manage',
              menuname: '用户管理',
              hasThird: 'N',
              url: 'system/user',
              menus: null
            },
            {
              menuid: 73,
              icon: 'icon-news-manage',
              menuname: '角色管理',
              hasThird: 'N',
              url: 'system/Role',
              menus: null
            },
          ]
        },
        {
          menuid: 128,
          icon: 'li-icon-shangchengxitongtubiaozitihuayuanwenjian91',
          menuname: '系统管理',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 129,
              icon: 'icon-provider-manage',
              menuname: '通知公告管理',
              hasThird: 'N',
              url: 'channel/notice',
              menus: null
            },
            {
              menuid: 175,
              icon: 'icon-provider-manage',
              menuname: '评论管理',
              hasThird: 'N',
              url: 'channel/comment',
              menus: null
            }
          ]
        },
      ],
      msg: 'success'
    }
    this.allmenu = res.data
    menu(localStorage.getItem('logintoken'))
      .then(res => {
        console.log(JSON.stringify(res))
        if (res.success) {
          this.allmenu = res.data
        } else {
          this.$message.error(res.msg)
          return false
        }
      })
      .catch(err => {
        this.$message.error('数据加载失败，请稍后再试！')
      })
    // 监听
    this.$root.Bus.$on('toggle', value => {
      this.collapsed = !value
    })
  }
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}
.el-menu-item-group__title {
  padding: 0px;x
}
.el-menu-bg {
  background-color: #1f2d3d !important;
}
.el-menu {
  border: none;
}
.logobox {
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}
.logoimg {
  height: 40px;
}
</style>
 <!-- 课程管理 -->
<template>
  <div>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="class-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.deptName" placeholder="输入课程名称"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="formInline.deptNo" placeholder="输入课程代码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 95.2%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable center prop="className" label="课程名称" width="200">
      </el-table-column>
      <el-table-column sortable prop="classNo" label="课程代码" width="200">
      </el-table-column>
      <el-table-column sortable prop="classTime" label="课时" width="200">
      </el-table-column>
      <el-table-column sortable prop="classTeacher" label="主讲老师" width="200">
      </el-table-column>
      <el-table-column sortable prop="editTime" label="发布时间" width="200">
        <template slot-scope="scope">
          <div>{{scope.row.editTime|timestampToTime}}</div>
          <!-- <div>{{scope.row.editTime}}</div> -->
        </template>
      </el-table-column>
      <el-table-column  prop="classPeople" label="学员人数" width="200">
      </el-table-column>
      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="课程名称" prop="deptName">
          <el-input size="small" v-model="editForm.deptName" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="课程代码" prop="deptNo">
          <el-input size="small" v-model="editForm.deptNo" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="课时" prop="deptNo">
          <el-input size="small" v-model="editForm.deptNo" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="主讲老师" prop="deptNo">
          <el-input size="small" v-model="editForm.deptNo" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="学员人数" prop="deptNo">
          <el-input size="small" v-model="editForm.deptNo" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { deptList, deptSave, deptDelete } from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      editForm: {
        classID: '',
       className: '',
       classNo: '',
        token: localStorage.getItem('logintoken')
      },
      // rules表单验证
      rules: {
       className: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ],
       classNo: [{ required: true, message: '请输入部门代码', trigger: 'blur' }]
      },
      formInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      // 删除部门
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */

  created() {
    this.getdata(this.formInline)
  },
 
  methods: {
    // 获取课程列表
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 5,
        data: [
          {
            addUser: null,
            editUser: null,
            addTime: 1521062371000,
            editTime:'2024-03-01',
            classID: 2,
            className: 'vue',
            classNo: 'V001',
            classTime:30,
            classTeacher: '王琳琳',
            classPeople: 7,
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1521063247000,
            editTime:'2024-03-02',
            classID: 3,
           className: 'java',
           classNo: 'J002',
           classTime:25,
           classTeacher: '初夏',
           classPeople: 10,
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526349555000,
            // editTime: 1526349565000,
            editTime:'2024-03-01',
            classID: 12,
           className: 'javascript',
           classNo: 'J003',
           classTeacher: '刘梦',
           classPeople: 6,
           classTime:26,
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526373178000,
            // editTime: 1526373178000,
            editTime:'2024-03-02',
            classID: 13,
           className: 'react',
           classNo: 'R001',
           classTime:28,
           classPeople: 8,
           classTeacher: '高雅',
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526453107000,
            // editTime: 1526453107000,
            editTime:'2024-03-03',
            classID: 17,
           className: 'php',
           classNo: 'P0001',
           classTeacher: '徐真真',
           classTime:30,
           classPeople: 9,
            parentId: 1
          }
        ]
      }
      this.loading = false
      this.listData = res.data
      this.pageparm.currentPage = this.formInline.page
      this.pageparm.pageSize = this.formInline.limit
      this.pageparm.total = res.count
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改'
        this.editForm.classID = row.classID
        this.editForm.deptName = row.deptName
        this.editForm.deptNo = row.deptNo
      } else {
        this.title = '添加'
        this.editForm.classID = ''
        this.editForm.deptName = ''
        this.editForm.deptNo = ''
      }
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          deptSave(this.editForm)
            .then(res => {
              this.editFormVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.formInline)
                this.$message({
                  type: 'success',
                  message: '课程保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.editFormVisible = false
              this.loading = false
              this.$message.error('课程保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除课程
    deleteUser(index, row) {
      this.$confirm(`确定要删除《${row.className}》课程吗?`, '删除课程', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deptDelete(row.classID)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '课程已删除!'
                })
                this.getdata(this.formInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('课程删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
    }
  }
}
</script>
<style scoped>
.class-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>
<!--学习进度概览   -->
<template>
  <!-- 组件 -->
  <div class="stbox">
    <!-- 搜索，切换 -->
    <el-row :gutter="23">
      <el-col :span="18">
        <div class="stbgc">
          <el-row :gutter="23">
            <el-col :span="7">
              <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-col>
            <el-col :span="7" class="stsearch">
              <el-button size="small" type="primary">搜索</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 统计图 -->
    <el-row :gutter="23">
      <el-col :span="8" class="text-c">
        <div class="st-gbox" style="width:400px;height: 350px;">
          <div class="cavasbox" ref="vuechart"></div>
        </div>
      </el-col>
      <el-col :span="8" class="text-c">
        <div class="st-gbox" style="width:400px;height: 350px;">
          <div class="cavasbox" ref="javachart"></div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="23">
      <el-col :span="8" class="text-c">
        <div class="st-gbox" style="width:400px;height: 350px;">
          <div class="cavasbox" ref="phpchart"></div>
        </div>
      </el-col>
      <el-col :span="8" class="text-c">
        <div class="st-gbox" style="width:400px;height: 350px;">
          <div class="cavasbox" ref="reactchart"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
export default {
  name: "welcome",
  data() {
    return {
      machineNo: '',
      type: 'day',
      // vue进度 
      vueoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        title: {
          text: 'VUE学习进度',
        },
        //显示图列
        legend: {
          data: [{
            name: 'java',
            icon: 'rect'
          },
          {
            name: 'vue',
            icon: 'rect'
          }, {
            name: 'react',
            icon: 'rect'
          }, {
            name: 'php',
            icon: 'rect'
          }
          ],
          type: 'plain',
          orient: 'horizontal',
          show: true //图例是否显示
        },
        grid: {
          left: 50,
          right: 10,
          // top: 30,
          bottom: 30,
          borderWidth: 1
        },
        series: [
          {
            name: 'Vue进度',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 28, name: 'Vue进度' }],
            axisLine: {
                lineStyle: {
                    width: 30,
                    color: [
                        [0.3, '#67e0e3'], // 0 到 30% 使用颜色渐变
                        [0.7, '#37a2da'], // 30% 到 70% 使用颜色渐变
                        [1, '#fd666d'],   // 70% 到 100% 使用颜色渐变
                    ]
                }
            },
          }
        ]
      },
        //  java 进度
      javaoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        title: {
          text: 'java学习进度',
        },
        //显示图列
        legend: {
          data: [{
            name: 'java',
            icon: 'rect'
          },
          {
            name: 'vue',
            icon: 'rect'
          }, {
            name: 'react',
            icon: 'rect'
          }, {
            name: 'php',
            icon: 'rect'
          }
          ],
          type: 'plain',
          orient: 'horizontal',
          show: true //图例是否显示
        },
        grid: {
          left: 50,
          right: 10,
          // top: 30,
          bottom: 30,
          borderWidth: 1
        },
        series: [
          {
            name: 'Java进度',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 37, name: 'Java进度' }],
            axisLine: {
                lineStyle: {
                    width: 30,
                    color: [
                        [0.3, '#0000cd'], // 0 到 30% 使用颜色渐变
                        [0.7, '#6633FF'], // 30% 到 70% 使用颜色渐变
                        [1, '#33FFFF'],   // 70% 到 100% 使用颜色渐变
                    ]
                }
            },
          }
        ]
      },
        // react进度
      reactoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        title: {
          text: 'React学习进度',
        },
        //显示图列
        legend: {
          data: [{
            name: 'java',
            icon: 'rect'
          },
          {
            name: 'vue',
            icon: 'rect'
          }, {
            name: 'react',
            icon: 'rect'
          }, {
            name: 'php',
            icon: 'rect'
          }
          ],
          type: 'plain',
          orient: 'horizontal',
          show: true //图例是否显示
        },
        grid: {
          left: 50,
          right: 10,
          // top: 30,
          bottom: 30,
          borderWidth: 1
        },
        series: [
          {
            name: 'React进度',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 76, name: 'React进度' }],
            axisLine: {
                lineStyle: {
                    width: 30,
                    color: [
                        [0.3, '#FF6699'], // 0 到 30% 使用颜色渐变
                        [0.7, '#FF66FF'], // 30% 到 70% 使用颜色渐变
                        [1, '#9999FF'],   // 70% 到 100% 使用颜色渐变
                    ]
                }
            },
          }
        ]
      },
      //php 进度
      phpoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        title: {
          text: 'PHP学习进度',
        },
        //显示图列
        legend: {
          data: [{
            name: 'java',
            icon: 'rect'
          },
          {
            name: 'vue',
            icon: 'rect'
          }, {
            name: 'react',
            icon: 'rect'
          }, {
            name: 'php',
            icon: 'rect'
          }
          ],
          type: 'plain',
          orient: 'horizontal',
          show: true //图例是否显示
        },
        grid: {
          left: 50,
          right: 10,
          // top: 30,
          bottom: 30,
          borderWidth: 1
        },
        series: [
          {
            name: 'PHP进度',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 48, name: 'PHP进度' }],
            axisLine: {
                lineStyle: {
                    width: 30,
                    color: [
                        [0.3, '#33CC33'], // 0 到 30% 使用颜色渐变
                        [0.7, '#33CCCC'], // 30% 到 70% 使用颜色渐变
                        [1, '#33CCFF'],   // 70% 到 100% 使用颜色渐变
                    ]
                }
            },
          },
        ]
      },
    }
  },
  // 导入组件
  components: {
    // 点聚合组件
  },
  // 创建完毕状态(里面是操作)
  created() { },
  // 挂载结束状态(里面是操作)
  mounted() {
    this.getvue()
    this.getphp()
    this.getjava()
    this.getreact()
  },
  // 里面的函数只有调用才会执行
  methods: {
    //vue
    getvue() {
      this.chart = Chart.init(this.$refs.vuechart) //深色模式  ,'dark'
      this.chart.setOption(this.vueoption)
    },
    // 交易总金额
    getphp() {
      this.chart = Chart.init(this.$refs.phpchart)
      this.chart.setOption(this.phpoption)
    },
    // 总点击量
    getjava() {
      this.chart = Chart.init(this.$refs.javachart)
      this.chart.setOption(this.javaoption)
    },
    // 支付方式统计
    getreact() {
      this.chart = Chart.init(this.$refs.reactchart)
      this.chart.setOption(this.reactoption)
    },
  }
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  padding: 0px 16px;
}
.stsearch {
  text-align: center;
}
.text-c {
  text-align: center;
}
.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}
.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}
</style>
<!-- 学习进度记录 -->
<template>
  <div>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="surgical" class="class-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="surgical.deptName" placeholder="输入课程名称"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="surgical.deptNo" placeholder="输入课程代码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="searchClass">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 83%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable center prop="className" label="课程名称" width="200">
      </el-table-column>
      <el-table-column sortable prop="classNo" label="课程代码" width="200">
      </el-table-column>
      <el-table-column  prop="classTime" label="章节" width="200">
      </el-table-column>
      <el-table-column sortable prop="classTeacher" label="主讲老师" width="200">
      </el-table-column>
      <el-table-column sortable prop="editTime" label="学习时长" width="200">
        <template slot-scope="scope">
          <div>{{scope.row.editTime}}</div>
          <!-- <div>{{scope.row.editTime}}</div> -->
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>
<script>
import { deptList, deptSave, deptDelete } from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      editForm: {
        classID: '',
       className: '',
       classNo: '',
        token: localStorage.getItem('logintoken')
      },
      // rules表单验证
      rules: {
       className: [
          { required: true, message: '请输入课程名称', trigger: 'blur' }
        ],
       classNo: [{ required: true, message: '请输入课程代码', trigger: 'blur' }]
      },
      surgical: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      // 删除课程
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },

  created() {
    this.getdata(this.surgical)
  },
  methods: {
    // 获取课程列表
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 10,
        data: [
          {
            addUser: null,
            editUser: null,
            addTime: 1521062371000,
            editTime:'1小时30分钟',
            classID: 2,
            className: 'vue',
            classNo: 'V001',
            classTime:'第一章',
            classTeacher: '王琳琳',
            classPeople: 7,
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1521063247000,
            editTime:'45分钟',
            classID: 3,
           className: 'java',
           classNo: 'J002',
           classTime:'第五章',
           classTeacher: '初夏',
           classPeople: 10,
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526349555000,
            // editTime: 1526349565000,
            editTime:'2小时',
            classID: 12,
           className: 'javascript',
           classNo: 'J003',
           classTeacher: '刘梦',
           classPeople: 6,
           classTime:'第二章',
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526373178000,
            // editTime: 1526373178000,
            editTime:'1小时15分钟',
            classID: 13,
           className: 'react',
           classNo: 'R001',
           classTime:'第七章',
           classPeople: 8,
           classTeacher: '高雅',
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526453107000,
            // editTime: 1526453107000,
            editTime:'50分钟',
            classID: 17,
           className: 'php',
           classNo: 'P0001',
           classTeacher: '徐真真',
           classTime:'第五章',
           classPeople: 9,
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1521062371000,
            editTime:'1小时',
            classID: 2,
            className: 'vue',
            classNo: 'V001',
            classTime:'第二章',
            classTeacher: '王琳琳',
            classPeople: 7,
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1521063247000,
            editTime:'38分钟',
            classID: 3,
           className: 'java',
           classNo: 'J002',
           classTime:'第九章',
           classTeacher: '初夏',
           classPeople: 10,
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526349555000,
            // editTime: 1526349565000,
            editTime:'1小时05分',
            classID: 12,
           className: 'javascript',
           classNo: 'J003',
           classTeacher: '刘梦',
           classPeople: 6,
           classTime:'第三章',
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526373178000,
            // editTime: 1526373178000,
            editTime:'1小时09分钟',
            classID: 13,
           className: 'react',
           classNo: 'R001',
           classTime:'第十一章',
           classPeople: 8,
           classTeacher: '高雅',
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526453107000,
            // editTime: 1526453107000,
            editTime:'59分钟',
            classID: 17,
           className: 'php',
           classNo: 'P0001',
           classTeacher: '徐真真',
           classTime:'第七章',
           classPeople: 9,
            parentId: 1
          }
        ]
      }
      this.loading = false
      this.listData = res.data
      this.pageparm.currentPage = this.surgical.page
      this.pageparm.pageSize = this.surgical.limit
      this.pageparm.total = res.count
      // 测试环境用测试环境  模拟数据结束  
      /***
       * 正式环境   正式环境环境 调用接口
       */
      deptList(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.listData = res.data
            // 分页赋值
            this.pageparm.currentPage = this.surgical.page
            this.pageparm.pageSize = this.surgical.limit
            this.pageparm.total = res.count
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('数据加载失败，请稍后再试！')
        })
    },
    // 分页插件事件
    callFather(parm) {
      this.surgical.page = parm.currentPage
      this.surgical.limit = parm.pageSize
      this.getdata(this.surgical)
    },
    // 搜索课程
    searchClass() {
      this.getdata(this.surgical)
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改'
        this.editForm.classID = row.classID
        this.editForm.deptName = row.deptName
        this.editForm.deptNo = row.deptNo
      } else {
        this.title = '添加'
        this.editForm.classID = ''
        this.editForm.deptName = ''
        this.editForm.deptNo = ''
      }
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          deptSave(this.editForm)
            .then(res => {
              this.editFormVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.surgical)
                this.$message({
                  type: 'success',
                  message: '课程保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.editFormVisible = false
              this.loading = false
              this.$message.error('课程保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除课程
    deleteUser(index, row) {
      this.$confirm(`确定要删除《${row.className}》课程吗?`, '删除课程', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deptDelete(row.classID)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '课程已删除!'
                })
                this.getdata(this.surgical)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('课程删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
    }
  }
}
</script>
<style scoped>
.class-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>
<!-- 题库管理 -->
<template>
  <div>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="questionInline" class="question-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="questionInline.deptName" placeholder="输入课程名称"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="questionInline.deptNo" placeholder="输入题库内容"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="searchQuestion">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addQuestion()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column  center prop="className" label="课程名称" width="200">
      </el-table-column>
      <el-table-column  prop="classContent" label="题库内容" width="400">
      </el-table-column>
      <el-table-column sortable prop="editTime" label="题库更新时间" width="200">
      </el-table-column>
      <el-table-column align="center" label="操作" width="290">
        <template slot-scope="scope">
          <el-button size="mini" @click="answerQuestion(scope.$index, scope.row)">答题</el-button>
          <el-button size="mini" type="danger" @click="deleteQuestion(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 添加界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="题库名称" prop="deptName">
          <el-input size="small" v-model="editForm.deptName" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="题库内容" prop="deptNo">
          <el-input size="small" v-model="editForm.deptNo" auto-complete="off" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { deptList, deptSave, deptDelete } from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      editForm: {
        classID: '',
       className: '',
       classContent: '',
        token: localStorage.getItem('logintoken')
      },
      // rules表单验证
      rules: {
       className: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ],
       classContent: [{ required: true, message: '请输入部门代码', trigger: 'blur' }]
      },
      questionInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      // 删除部门
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      },
      userAnswer:null,
      isAnswerCorrect:any,
    }
  },
  // 注册组件
  components: {
    Pagination
  },

  created() {
    this.getdata(this.questionInline)
  },
 
  methods: {
    // 获取列表
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 10,
        data: [
          {
            editTime:'2024年03月01号',
            classID: 2,
            className: 'vue',
            classContent: '关于vue的基础',
            classUser: '屿离别',
            classPeople: 7,
            parentId: 1
          },
          {
            editTime:'2024年03月03号',
            classID: 3,
           className: 'java',
           classContent: '通过学习，可以掌握Java语言的基础知识',
           classTime:'第五章',
           classUser: '漫游白兔星球',
           classPeople: 10,
            parentId: 1
          },
          {
            editTime:'2024年03月05号',
            classID: 12,
           className: 'javascript',
           classContent: '深入JavaScript，动态网页制作更得心应手。',
           classUser: '春日樱亭',
           classPeople: 6,
           classTime:'第二章',
            parentId: 1
          },
          {
            editTime:'2024年03月07号',
            classID: 13,
           className: 'react',
           classContent: 'React学习之旅，组件化思维深化。',
           classTime:'第七章',
           classPeople: 8,
           classUser: '人间宝藏',
            parentId: 1
          },
          {
            editTime:'2024年03月14号',
            classID: 17,
           className: 'php',
           classContent: 'PHP学习之路，拓宽技能边界。',
           classUser: '星河漫漫',
           classTime:'第五章',
           classPeople: 9,
            parentId: 1
          },
          {
            editTime:'2024年03月21号',
            classID: 2,
            className: 'vue',
            classContent: '学习 Vue 课程使我更加深入地了解前端开发',
            classTime:'第二章',
            classUser: '陌上桃花开',
            classPeople: 7,
            parentId: 1
          },
          {
            editTime:'2024年03月27号',
            classID: 3,
           className: 'java',
           classContent: 'Java学习之旅，收获满满，实践创新不断',
           classTime:'第九章',
           classUser: '梨花醉',
           classPeople: 10,
            parentId: 1
          },
          {
            editTime:'2024年04月01号',
            classID: 12,
           className: 'javascript',
           classContent: 'JavaScript学习之旅，编程逻辑更清晰。',
           classUser: '紫翼文学',
           classPeople: 6,
           classTime:'第三章',
            parentId: 1
          },
          {
            editTime:'2024年04月02号',
            classID: 13,
           className: 'react',
           classContent: '深入React，构建高效应用，交互体验更流畅。',
           classTime:'第十一章',
           classPeople: 8,
           classUser: '清风饮露',
            parentId: 1
          },
          {
            editTime:'2024年04月06号',
            classID: 17,
           className: 'php',
           classContent: '深入PHP学习，逻辑更缜密，网站开发得心应手',
           classUser: '墨染倾城',
           classTime:'第七章',
           classPeople: 9,
            parentId: 1
          }
        ]
      }
      this.loading = false
      this.listData = res.data
      this.pageparm.currentPage = this.questionInline.page
      this.pageparm.pageSize = this.questionInline.limit
      this.pageparm.total = res.count
      //测试环境使用模拟数据
       //正式环境 正式环境环境 调用接口
      deptList(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.listData = res.data
            // 分页赋值
            this.pageparm.currentPage = this.questionInline.page
            this.pageparm.pageSize = this.questionInline.limit
            this.pageparm.total = res.count
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('数据加载失败，请稍后再试！')
        })
    },
    // 分页插件事件
    callFather(parm) {
      this.questionInline.page = parm.currentPage
      this.questionInline.limit = parm.pageSize
      this.getdata(this.questionInline)
    },
    // 搜索事件
    searchQuestion() {
      this.getdata(this.questionInline)
    },
    //显示编辑界面
    addQuestion: function(index, row) {
      this.editFormVisible = true
        this.title = '添加'
        this.editForm.classID = ''
        this.editForm.deptName = ''
        this.editForm.deptNo = ''
    },
    // 答题
    answerQuestion() {  
    if (this.userAnswer === null) {  
      alert('请先选择一个答案！');  
      return;  
    }  
    // 调用 checkAnswer 方法检查答案  
    const isCorrect = this.checkAnswer(this.userAnswer, this.currentQuestion.answer);  
    // 更新答案正确性的状态  
    this.isAnswerCorrect = isCorrect;  
    // 显示答题结果  
    if (isCorrect) {  
      alert('回答正确！');  
    } else {  
      alert('回答错误。');  
    }  
    // 重置用户答案，以便用户可以重新答题  
    this.userAnswer = null; 
  },  
  checkAnswer(userAnswer, correctAnswer) {   
    return userAnswer === correctAnswer;  
  },  
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          deptSave(this.editForm)
            .then(res => {
              this.editFormVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.questionInline)
                this.$message({
                  type: 'success',
                  message: '保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.editFormVisible = false
              this.loading = false
              this.$message.error('保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除
    deleteQuestion(index, row) {
      this.$confirm(`确定要删除《${row.className}》课程吗?`, '删除课程', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deptDelete(row.classID)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '已删除!'
                })
                this.getdata(this.questionInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭弹出框
    closeDialog() {
      this.editFormVisible = false
    }
  }
}
</script>
<style scoped>
.question-search {
  margin-top: 20px;
}
</style>
 <!-- 用户管理 -->
 <template>
  <div>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="userInline" class="user-search">
      <el-form-item label="搜索：">
        <el-select size="small" v-model="userInline.isLock" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option label="正常" value="N"></el-option>
          <el-option label="已锁定" value="Y"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="userInline.userName" placeholder="输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="userInline.userMobile" placeholder="输入手机号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="editUser()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" @selection-change="selectChange" :data="userData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="50">
      </el-table-column>
      <el-table-column align="center" sortable prop="userName" label="用户名" width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="userRealName" label="姓名" width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="userMobile" label="手机号" width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="userSex" label="性别" min-width="50">
      </el-table-column>
      <el-table-column align="center" sortable prop="userEmail" label="邮件" min-width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="editTime" label="修改时间" min-width="120">
        <template slot-scope="scope">
          <div>{{scope.row.editTime}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable prop="isLock" label="状态" min-width="50">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isLock=='N'?nshow:fshow" active-color="#13ce66" inactive-color="#ff4949" @change="editState(scope.$index, scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="editUser(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")'>
      <el-form label-width="80px" ref="editForm" :model="editForm" :rules="rules">
        <el-form-item label="用户名" prop="userName">
          <el-input size="small" v-model="editForm.userName" auto-complete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="userRealName">
          <el-input size="small" v-model="editForm.userRealName" auto-complete="off" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="roleId">
          <el-select size="small" v-model="editForm.roleId" placeholder="请选择" class="userRole">
            <el-option label="公司管理员" value="1"></el-option>
            <el-option label="普通用户" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="userMobile">
          <el-input size="small" v-model="editForm.userMobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮件" prop="userEmail">
          <el-input size="small" v-model="editForm.userEmail" placeholder="请输入邮箱地址"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="userSex">
          <el-radio v-model="editForm.userSex" label="男">男</el-radio>
          <el-radio v-model="editForm.userSex" label="女">女</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitUser('editForm')">保存</el-button>
      </div>
    </el-dialog>
    <!-- 数据权限 -->
    <el-dialog title="数据权限" :visible.sync="dataAccessshow" width="30%" @click='closeDialog("perm")'>
      <el-tree ref="tree" default-expand-all="" :data="UserDept" :props="defaultProps" :default-checked-keys="checkmenu" node-key="id" show-checkbox>
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("perm")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="menuPermSave">保存</el-button>
      </div>
    </el-dialog>
    <!-- 所属单位 -->
    <el-dialog title="所属单位" :visible.sync="unitAccessshow" width="30%" @click='closeDialog("unit")'>
      <el-tree ref="tree" default-expand-all="" :data="UserDept" :props="defaultProps" @check-change="handleClick" :default-checked-keys="checkmenu" node-key="id" show-checkbox check-strictly>
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("unit")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="unitPermSave">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 导入请求方法
import {
  userList,
  userSave,
  userDelete,
  userPwd,
  userExpireToken,
  userFlashCache,
  userLock,
  UserDeptTree,
  UserDeptSave,
  UserDeptdeptTree,
  UserChangeDept
} from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      title: '添加用户',
      editFormVisible: false, //控制编辑页面显示与隐藏
      dataAccessshow: false, //控制数据权限显示与隐藏
      unitAccessshow: false, //控制所属单位隐藏与显示
      // 编辑与添加
      editForm: {
        userId: '',
        userName: '',
        userRealName: '',
        roleId: '',
        userMobile: '',
        userEmail: '',
        userSex: '',
        token: localStorage.getItem('logintoken')
      },
      // 部门参数
      unitparm: {
        userIds: '',
        deptId: '',
        deptName: ''
      },
      // 选择数据
      selectdata: [],
      // rules表单验证
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        userRealName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        roleId: [{ required: true, message: '请选择角色', trigger: 'blur' }],
        userMobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1(3\d|47|5((?!4)\d)|7(0|1|[6-8])|8\d)\d{8,8}$/,
            required: true,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        userEmail: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            required: true,
            message: '请输入正确的邮箱',
            trigger: 'blur'
          }
        ],
        userSex: [{ required: true, message: '请选择性别', trigger: 'blur' }]
      },
      // 删除用户
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      // 重置密码
      resetpsd: {
        userId: '',
        token: localStorage.getItem('logintoken')
      },
      // 用户下线
      offline: {
        token: localStorage.getItem('logintoken')
      },
      // 请求数据参数
      userInline: {
        page: 1,
        limit: 10,
        deptId: '',
        userName: '',
        userMobile: '',
        isLock: ''
      },
      //用户数据
      userData: [],
      // 数据权限
      UserDept: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 选中
      checkmenu: [],
      //参数role
      saveroleId: '',
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  created() {
    this.getdata(this.userInline)
  },
  methods: {
    // 获取数据方法
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 4,
        data: [
          {
            addUser: '1',
            editUser: '1',
            addTime: null,
            editTime: "2024年03月01日",
            userId: 1,
            systemNo: 'pmd',
            userName: 'admin',
            userPassword: 'e10adc3949ba59abbe56e057f20f883e',
            userRealName: 'admin',
            userSex: '女',
            userMobile: '138123456789',
            userEmail: '111@qq.com',
            isLock: 'N',
            deptId: 1,
            deptName: 'xxxx',
            roleId: 1
          },
          {
            addUser: '1',
            editUser: '1',
            addTime: null,
            editTime: "2024年03月01日",
            userId: 3,
            systemNo: 'mc',
            userName: 'zhangdan',
            userPassword: 'e10adc3949ba59abbe56e057f20f883e',
            userRealName: '系统管理员',
            userSex: 'M',
            userMobile: '18616988966',
            userEmail: '222@qq.com',
            isLock: 'N',
            deptId: 2,
            deptName: 'xxxx',
            roleId: 101
          },
          {
            addUser: '1',
            editUser: '4',
            addTime: null,
            editTime: "2024年03月01日",
            userId: 4,
            systemNo: 'ec',
            userName: 'admin',
            userPassword: '59ba8b7dda9ff79186311a5a9fa155ca',
            userRealName: 'admin',
            userSex: '女',
            userMobile: '138123456789',
            userEmail: 'huangxuekun@founder.com',
            isLock: 'N',
            deptId: 2,
            deptName: 'xxxx',
            roleId: 3
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526275128000,
            editTime: "2024年03月01日",
            userId: 28,
            systemNo: null,
            userName: 'chumeng',
            userPassword: 'e10adc3949ba59abbe56e057f20f883e',
            userRealName: 'chumeng',
            userSex: '男',
            userMobile: '12354342345',
            userEmail: '111232@qq.com',
            isLock: 'N',
            deptId: 4,
            deptName: 'zxxxxx',
            roleId: 1
          },
        ]
      }
      this.loading = false
      this.userData = res.data
      // 分页赋值
      this.pageparm.currentPage = this.userInline.page
      this.pageparm.pageSize = this.userInline.limit
      this.pageparm.total = res.count
      // 测试环境  测试环境  模拟数据结束    测试环境 测试环境用模拟数据
      /***
       *  正式环境 正式环境环境 调用接口
       */
      // 获取用户列表
      userList(parameter).then(res => {
        this.loading = false
        if (res.success == false) {
          this.$message({
            type: 'info',
            message: res.msg
          })
        } else {
          this.userData = res.data
          // 分页赋值
          this.pageparm.currentPage = this.userInline.page
          this.pageparm.pageSize = this.userInline.limit
          this.pageparm.total = res.count
        }
      })
    },
    // 分页插件事件
    callFather(parm) {
      this.userInline.page = parm.currentPage
      this.userInline.limit = parm.pageSize
      this.getdata(this.userInline)
    },
    //搜索事件
    search() {
      this.getdata(this.userInline)
    },
    // 修改type
    editState: function(index, row) {
      this.loading = true
      let parm = {
        lock: '',
        userId: '',
        token: localStorage.getItem('logintoken')
      }
      parm.userId = row.userId
      let lock = row.isLock
      if (lock == 'N') {
        parm.lock = 'Y'
      } else {
        parm.lock = 'N'
      }
      // 修改状态
      userLock(parm).then(res => {
        this.loading = false
        if (res.success == false) {
          this.$message({
            type: 'info',
            message: res.msg
          })
        } else {
          this.$message({
            type: 'success',
            message: '状态修改成功'
          })
          this.getdata(this.userInline)
        }
      })
    },
    //显示编辑界面
    editUser: function(index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改用户'
        this.editForm.userId = row.userId
        this.editForm.userName = row.userName
        this.editForm.userRealName = row.userRealName
        this.editForm.roleId = row.roleId
        this.editForm.userMobile = row.userMobile
        this.editForm.userEmail = row.userEmail
        this.editForm.userSex = row.userSex
      } else {
        this.title = '添加用户'
        this.editForm.userId = ''
        this.editForm.userName = ''
        this.editForm.userRealName = ''
        this.editForm.roleId = ''
        this.editForm.userMobile = ''
        this.editForm.userEmail = ''
        this.editForm.userSex = ''
      }
    },
    // 编辑、添加提交方法
    submitUser(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          // 请求方法
          userSave(this.editForm)
            .then(res => {
              this.editFormVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.userInline)
                this.$message({
                  type: 'success',
                  message: '数据保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.editFormVisible = false
              this.loading = false
              this.$message.error('保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 显示部门设置
    handleunit: function(index, row) {
      this.unitAccessshow = true
      let parms = 0
      UserDeptdeptTree(parms)
        .then(res => {
          if (res.data.success) {
            this.UserDept = this.changeArr(res.data.data)
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            })
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('配置权限失败,请稍后再试！')
        })
    },
    handleClick(data, checked, node) {
      if (checked) {
        this.$refs.tree.setCheckedNodes([])
        this.$refs.tree.setCheckedNodes([data])
        this.unitparm.deptId = data.id
        this.unitparm.deptName = data.name
        //交叉点击节点
      } else {
      }
    },
    // 保存部门
    unitPermSave() {
      let len = this.selectdata
      let ids = []
      if (len != 0) {
        for (let i = 0; i < len.length; i++) {
          ids.push(len[i].userId)
        }
      }
      this.unitparm.userIds = ids.join(',')
      UserChangeDept(this.unitparm)
        .then(res => {
          this.unitAccessshow = false
          if (res.success) {
            this.$message({
              type: 'success',
              message: '部门设置成功！'
            })
            this.getdata(this.userInline)
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            })
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('部门设置失败,请稍后再试！')
        })
    },
    // 选择复选框事件
    selectChange(val) {
      this.selectdata = val
    },
    // 关闭编辑、增加弹出框
    closeDialog(dialog) {
      if (dialog == 'edit') {
        this.editFormVisible = false
      } else if (dialog == 'perm') {
        this.dataAccessshow = false
      } else if (dialog == 'unit') {
        this.unitAccessshow = false
      }
    },
    // 删除用户
    deleteUser(index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 删除
          userDelete(row.id)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '数据已删除!'
                })
                this.getdata(this.userInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('数据删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除！'
          })
        })
    },
    // 重置密码
    resetpwd(index, row) {
      this.resetpsd.userId = row.userId
      this.$confirm('确定要重置密码吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          userPwd(this.resetpsd)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '重置密码成功！'
                })
                this.getdata(this.userInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('重置密码失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消重置密码！'
          })
        })
    },
    // 数据权限
    dataAccess: function(index, row) {
      this.dataAccessshow = true
      this.saveroleId = row.userId
      UserDeptTree(row.userId)
        .then(res => {
          if (res.data.success) {
            this.checkmenu = this.changemenu(res.data.data)
            this.UserDept = this.changeArr(res.data.data)
          } else {
            this.$message({
              type: 'info',
              message: res.data.msg
            })
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('获取权限失败，请稍后再试！')
        })
    },
    //数据格式化
    changeArr(data) {
      var pos = {}
      var tree = []
      var i = 0
      while (data.length != 0) {
        if (data[i].pId == 0) {
          tree.push({
            id: data[i].id,
            name: data[i].name,
            pId: data[i].pId,
            open: data[i].open,
            checked: data[i].checked,
            children: []
          })
          pos[data[i].id] = [tree.length - 1]
          data.splice(i, 1)
          i--
        } else {
          var posArr = pos[data[i].pId]
          if (posArr != undefined) {
            var obj = tree[posArr[0]]
            for (var j = 1; j < posArr.length; j++) {
              obj = obj.children[posArr[j]]
            }
            obj.children.push({
              id: data[i].id,
              name: data[i].name,
              pId: data[i].pId,
              open: data[i].open,
              checked: data[i].checked,
              children: []
            })
            pos[data[i].id] = posArr.concat([obj.children.length - 1])
            data.splice(i, 1)
            i--
          }
        }
        i++
        if (i > data.length - 1) {
          i = 0
        }
      }
      return tree
    },
    // 选中菜单
    changemenu(arr) {
      let change = []
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].checked) {
          change.push(arr[i].id)
        }
      }
      return change
    },
    // 菜单权限-保存
    menuPermSave() {
      let parm = {
        userId: this.saveroleId,
        deptIds: ''
      }
      let node = this.$refs.tree.getCheckedNodes()
      let moduleIds = []
      if (node.length != 0) {
        for (let i = 0; i < node.length; i++) {
          moduleIds.push(node[i].id)
        }
        parm.deptIds = JSON.stringify(moduleIds)
      }
      UserDeptSave(parm)
        .then(res => {
          if (res.success) {
            this.$message({
              type: 'success',
              message: '权限保存成功'
            })
            this.dataAccessshow = false
            this.getdata(this.userInline)
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            })
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('权限保存失败，请稍后再试！')
        })
    },
    // 下线用户
    offlineUser(index, row) {
      this.$confirm('确定要让' + row.userName + '用户下线吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          userExpireToken(row.userName)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '用户' + row.userName + '强制下线成功！'
                })
                this.getdata(this.userInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('用户下线失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 刷新缓存
    refreshCache(index, row) {
      userFlashCache(row.userName)
        .then(res => {
          if (res.success) {
            this.$message({
              type: 'success',
              message: '刷新成功！'
            })
            this.getdata(this.userInline)
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            })
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('刷新失败，请稍后再试！')
        })
    }
  }
}
</script>
<!-- 权限管理 -->
<template>
  <div>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="roleInline" class="Role">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="roleInline.roleName" placeholder="输入权限名称"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="roleInline.roleNo" placeholder="输入权限代码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="editRole()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="roleName" label="权限名称" width="300">
      </el-table-column>
      <el-table-column sortable prop="roleNo" label="权限代码" width="300">
      </el-table-column>
      <el-table-column sortable prop="editTime" label="修改时间" width="300">
        <template slot-scope="scope">
          <!-- <div>{{scope.row.editTime|timestampToTime}}</div> -->
          <div>{{scope.row.editTime}}</div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="editUser" label="修改人" width="300">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="editRole(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteRole(scope.$index, scope.row)">删除</el-button>
          <el-button size="mini" type="success" @click="menuAccess(scope.$index, scope.row)">菜单权限</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='close("edit")'>
      <el-form label-width="120px" :model="editForm" ref="editForm" :rules="rules">
        <el-form-item label="系统编码" prop="systemNo">
          <el-input size="small" v-model="editForm.systemNo" auto-complete="off" placeholder="请输入系统编码"></el-input>
        </el-form-item>
        <el-form-item label="权限名称" prop="roleName">
          <el-input size="small" v-model="editForm.roleName" auto-complete="off" placeholder="请输入权限名称"></el-input>
        </el-form-item>
        <el-form-item label="权限代码" prop="roleNo">
          <el-input size="small" v-model="editForm.roleNo" auto-complete="off" placeholder="请输入权限代码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='close("edit")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>
    <!-- 菜单权限 -->
    <el-dialog title="菜单权限" :visible.sync="menuAccessshow" width="30%" @click='close("perm")'>
      <el-tree ref="tree" default-expand-all="" :data="RoleRight" :props="RoleRightProps" :default-checked-keys="checkmenu" node-key="id" show-checkbox>
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='close("perm")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="menuPermSave">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  roleList,
  roleSave,
  roleDelete,
  rolePwd,
  RoleRightTree,
  RoleRightSave
} from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      menuAccessshow: false, //控制数据权限显示与隐藏
      title: '添加',
      editForm: {
        roleId: '',
        systemNo: '',
        roleNo: '',
        roleName: '',
        token: localStorage.getItem('logintoken')
      },
      // rules 表单验证
      rules: {
        systemNo: [
          { required: true, message: '请输入系统编码', trigger: 'blur' }
        ],
        roleNo: [
          { required: true, message: '请输入权限代码', trigger: 'blur' }
        ],
        roleName: [
          { required: true, message: '请输入权限名称', trigger: 'blur' }
        ]
      },
      roleInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      // 删除
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 数据权限
      RoleRight: [],
      RoleRightProps: {
        children: 'children',
        label: 'name'
      },
      // 选中
      checkmenu: [],
      //参数role
      saveroleId: '',
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  created() {
    this.getdata(this.roleInline)
  },
  methods: {
    // 获取权限列表
    getdata(parameter) {
      // 模拟数据
      let res = {
        code: 0,
        msg: null,
        count: 6,
        data: [
          {
            addUser: 'root',
            editUser: 'root',
            addTime: 1519182004000,
            editTime: '2024年03月01日',
            roleId: 1,
            systemNo: 'pmd',
            roleNo: 'Administrator',
            roleName: 'admin'
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1521111376000,
            editTime:'2024年03月01日',
            roleId: 2,
            systemNo: 'order',
            roleNo: 'admin',
            roleName: '公司管理员'
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1520678221000,
            editTime: '2024年03月01日',
            roleId: 95,
            systemNo: 'pm',
            roleNo: 'common',
            roleName: '普通用户'
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526652148000,
            editTime: '2024年03月01日',
            roleId: 101,
            systemNo: 'test',
            roleNo: 'demo',
            roleName: '演示权限'
          }
        ]
      }
      this.loading = false
      this.listData = res.data
      // 分页赋值
      this.pageparm.currentPage = this.roleInline.page
      this.pageparm.pageSize = this.roleInline.limit
      this.pageparm.total = res.count
      // 测试环境  测试环境  模拟数据结束    测试环境 测试环境用
       //正式环境  正式环境环境 调用接口
      roleList(parameter)
        .then(res => {
          this.loading = false
          if (res.success == false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.listData = res.data
            // 分页赋值
            this.pageparm.currentPage = this.roleInline.page
            this.pageparm.pageSize = this.roleInline.limit
            this.pageparm.total = res.count
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('获取权限列表失败，请稍后再试！')
        })
    },
    // 分页插件事件
    callFather(parm) {
      this.roleInline.page = parm.currentPage
      this.roleInline.limit = parm.pageSize
      this.getdata(this.roleInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.roleInline)
    },
    //显示编辑界面
    editRole: function(index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改'
        this.editForm.roleId = row.roleId
        this.editForm.systemNo = row.systemNo
        this.editForm.roleNo = row.roleNo
        this.editForm.roleName = row.roleName
      } else {
        this.title = '添加'
        this.editForm.roleId = ''
        this.editForm.systemNo = ''
        this.editForm.roleNo = ''
        this.editForm.roleName = ''
      }
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          roleSave(this.editForm)
            .then(res => {
              this.editFormVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.roleInline)
                this.$message({
                  type: 'success',
                  message: '权限保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.editFormVisible = false
              this.loading = false
              this.$message.error('权限保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除权限
    deleteRole(index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          roleDelete(row.roleId)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '权限已删除！'
                })
                this.getdata(this.roleInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('权限删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 数据权限
    menuAccess: function(index, row) {
      this.menuAccessshow = true
      this.saveroleId = row.roleId
      RoleRightTree(row.roleId)
        .then(res => {
          if (res.data.success) {
            this.$message({
              type: 'success',
              message: '获取权限成功'
            })
            this.changemenu(res.data.data)
            this.RoleRight = this.changeArr(res.data.data)
          } else {
            this.$message({
              type: 'info',
              message: res.data.msg
            })
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('获取权限失败，请稍后再试！')
        })
    },
    // 选中菜单
    changemenu(arr) {
      let change = []
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].checked) {
          change.push(arr[i].id)
        }
      }
      this.checkmenu = change
    },
    // tree 递归
    changeArr(list) {
      var temptree = [],
        tree = [],
        items = []
      for (var i in list) {
        if (!temptree[list[i].id]) {
          var trow = {
            id: list[i].id,
            pId: list[i].pId,
            name: list[i].name,
            open: list[i].open,
            checked: list[i].checked,
            children: []
          }
          temptree[list[i].id] = trow
          items.push(trow)
        }
        if (list[i].uid > 0) {
          temptree[list[i].id]['children'].push({
            id: list[i].id,
            pId: list[i].pId,
            name: list[i].name,
            open: list[i].open,
            checked: list[i].checked,
            children: []
          })
        }
      }
      for (var j in items) {
        if (temptree[items[j].pId]) {
          temptree[items[j].pId]['children'].push(temptree[items[j].id])
        } else {
          tree.push(temptree[items[j].id])
        }
      }
      temptree = null
      items = null
      return tree
    },
    // 菜单权限-保存
    menuPermSave() {
      let parm = {
        roleId: this.saveroleId,
        moduleIds: ''
      }
      let node = this.$refs.tree.getCheckedNodes()
      let moduleIds = []
      if (node.length != 0) {
        for (let i = 0; i < node.length; i++) {
          moduleIds.push(node[i].id)
        }
        parm.moduleIds = JSON.stringify(moduleIds)
      }
      RoleRightSave(parm)
        .then(res => {
          if (res.success) {
            this.$message({
              type: 'success',
              message: '权限保存成功'
            })
            this.menuAccessshow = false
            this.getdata(this.roleInline)
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            })
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('权限保存失败，请稍后再试！')
        })
    },
    // 关闭编辑、增加弹出框
    close(dialog) {
      if (dialog == 'edit') {
        this.editFormVisible = false
      } else if (dialog == 'perm') {
        this.menuAccessshow = false
      }
    }
  }
}
</script>
<!-- 通知公告管理 -->
<template>
  <div>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable center prop="className" label="标题" width="200">
      </el-table-column>
      <el-table-column sortable prop="content" label="内容" width="200">
      </el-table-column>
      <el-table-column  prop="editTime" label="生效时间" width="200">
      </el-table-column>
      <el-table-column sortable prop="classTeacher" label="发布人" width="200">
      </el-table-column>
      <el-table-column sortable prop="addTime" label="发布时间" width="200">
        <template slot-scope="scope">
          <div>{{scope.row.editTime}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handlecheck(scope.$index, scope.row)">查看</el-button>
          <el-button size="mini" type="danger" @click="deleteNotice(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
  </div>
</template>
<script>
import { deptList, deptSave, deptDelete } from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      editForm: {
        classID: '',
       className: '',
       classNo: '',
        token: localStorage.getItem('logintoken')
      },
      formInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      // 删除部门
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  created() {
    this.getdata(this.formInline)
  },
 
  methods: {
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 3,
        data: [
          {
            addTime: "2024年1月1日",
            editTime:'2024年1月1日',
            classID: 2,
            className: '元旦放假通知',
            classNo: 'V001',
            content:'元旦放假通知',
            classTeacher: '王琳',
            classPeople: 7,
            parentId: 1
          },
          {
            addTime: "2024年3月1日",
            editTime:'2024年3月1日',
            classID: 3,
           className: 'vue公开课通知',
           classNo: 'J002',
           content:'vue公开课通知',
           classTeacher: '初夏',
           classPeople: 10,
            parentId: 1
          },
          {
            addTime: "2024年4月1日",
            editTime:'2024年4月4日',
            classID: 12,
           className: '清明节放假通知',
           classNo: 'J003',
           classTeacher: '刘梦',
           classPeople: 6,
           content:'清明节放假通知',
            parentId: 1
          },
        ]
      }
      this.loading = false
      this.listData = res.data
      this.pageparm.currentPage = this.formInline.page
      this.pageparm.pageSize = this.formInline.limit
      this.pageparm.total = res.count
      // 测试环境  模拟数据结束  
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
    //显示查看界面
    handlecheck: function(index, row) {
      this.editFormVisible = true
    },
    // 删除评论
    deleteNotice(index, row) {
      this.$confirm(`确定要删除《${row.className}》评论吗?`, '删除评论', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deptDelete(row.classID)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '评论已删除!'
                })
                this.getdata(this.formInline)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('评论删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
    }
  }
}
</script>
